<template>
    <div class="edit-dialog">
      <el-dialog title="编辑" :visible.sync="form.dlogOpen" :close-on-click-modal="false" :show-close="false">
        <el-form :model="form" :rules="rules" ref="form" label-position="right" label-width="90px">
          <el-form-item label="ID：">
            <el-input v-model="form.id" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="名称：" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
           <el-form-item label="图标：" prop="icon">
            <el-input v-model="form.icon" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="描述：" prop="desc">
            <el-input v-model="form.desc"></el-input>
          </el-form-item>
          <el-form-item label="文档：">
            <el-input v-model="form.doc"></el-input>
          </el-form-item>
          <el-form-item label="链接：" prop="link">
            <el-input v-model="form.link"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogCancel">取 消</el-button>
          <el-button type="primary" @click="submitEdit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>
<script>
export default {
  name: '',
  props: {
    formData: {
      type: Object
    },
    classData: {
      default: {}
    }
  },
  data() {
    return {
      form: this.formData,
      // form: {
      //     id: '',
      //     name: '',
      //     icon: '',
      //     desc: '',
      //     doc: '',
      //     link: '',
      //     dlogOpen: false,
      //   },
       rules: {
          name: [
            { required: true, message: '请输入项目名称', trigger: 'blur' },
          ],
          icon: [
            { required: true, message: '请输入图片地址', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '请输入项目描述', trigger: 'blur' }
          ],
          link: [
            { required: true, message: '请选输入项目url', trigger: 'blur' }
          ]
        }
    };
  },
  watch: {
    formData() {
      this.form = this.formData
    }
  },
  methods: {
    submitEdit() {
       this.$refs.form.validate((valid) => {
          if (valid) {
            const control = this.formData.control
            console.log("control", control);
            const { id, name, icon, desc, doc, link } = this.form
            const data = {
                id,
                name,
                icon,
                desc,
                doc,
                link,
            }
            console.log("form", this.classData);
            let navArry =this.classData.nav
            let newData = {}
            if(control==="add") {
              // push新增
              navArry.push(data)
            } else if(control==="edit") {
              navArry = navArry.map((item) => item.id === id ? data : item)
            } 
            newData = {
                id:this.classData.id,
                name: this.classData.name,
                title: this.classData.title,
                nav: navArry
              }
            this.apiFn(newData)
          } else {
            console.log('error submit!!');
            return false;
          }
       });
    },
    apiFn(data) {
      const temApi = "/api/" + this.classData.name
      this.$axios.post(temApi, data) // 获取nav数据
        .then(res => {
          console.log("res", res);
            // this.data = res.data;
            // for (let key in this.data) {
            //   if (this.data[key].hasOwnProperty("children")) {
            //     this.childrenList = this.childrenList.concat(this.data[key].children);
            //   }
            // }
            // this.spinShow = false;
            this.$emit('dialog-form', false)
        })
        .catch(e => {
            this.$message.error({
                content: "获取数据失败!",
                duration: 120,
                closable: true
            });
            window.console.log("错误信息：",e);
        });
    },
    dialogCancel() {
      this.$emit('dialog-form', false)
      // this.dialog.open = false;
      // this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        name: undefined,
        icon: undefined,
        desc: undefined,
        doc: undefined,
        link: undefined,
      };  
    }  
  }
}
</script>